import { Text } from "@tarojs/components";
import { CSSProperties, FC } from "react";
import cn from "classnames";
import { TextProps } from "@tarojs/components/types/Text";
import { pxTransform } from "@tarojs/taro";

interface Props extends TextProps {
  prefix?: string;
  type: string;
  color?: string;
  /** 750的设计稿 */
  size?: number;
  /** 旋转角度 */
  rotate?: number;
  /** 是否旋转 */
  spin?: boolean;
  /** 动画延时单位s */
  duration?: number;
  style?: CSSProperties;
}

const Icon: FC<Props> = (props) => {
  const {
    prefix,
    type,
    color,
    size,
    style,
    className,
    rotate = 0,
    duration = 1,
    spin,
    ...rest
  } = props;

  return (
    <Text
      className={cn(prefix, `${prefix}-${type}`, className)}
      style={{
        color,
        transition: "transform .3s",
        fontSize: pxTransform(size ?? 32, 750),
        transform: `rotate(${rotate}deg)`,
        animation: spin ? `spin ${duration}s linear infinite` : undefined,
        ...style,
      }}
      {...rest}
    />
  );
};

Icon.defaultProps = {
  prefix: "icon",
  size: 32,
  color: "",
};

export default Icon;
